<template>
    <el-container>
        <el-aside width="15%">
            <el-affix :offset="200" style="height:100%">
                <el-scrollbar>
                <category-list
                    :categories="categories"
                    @categorySelected="getArticlesByCategory"
                    @categorySelectAll="getAllCategoryArticles"
                    class="my-category-list"
                ></category-list></el-scrollbar>
            </el-affix>
        </el-aside>
        <el-main>
            <div>
                <div v-if="articles.length != 0">
                    <article-list :articles="articles"></article-list>
                    <el-pagination
                        style="margin-top: 1em"
                        background
                        layout="prev, pager, next"
                        :current-page="page"
                        :page-size="pageSize"
                        :total="total"
                        @current-change="turnPage"
                        class="my-pagination"
                        :hide-on-single-page="true"
                    ></el-pagination>
                </div>
                <el-empty description="尚未添加" v-if="articles.length == 0"></el-empty>
            </div>
        </el-main>
    </el-container>
</template>
  
  <script>
import ArticleList from "./ArticleList.vue";
import CategoryList from "./CategoryList.vue";
import { getArticles } from "../api/articles";
import { getCategories } from "../api/categories";
import { onMounted, ref } from "vue";
export default {
    components: { ArticleList, CategoryList },
    props: {
        type: { type: String }
    },
    setup(props) {
        const categories = ref([]);
        const page = ref(1);
        const pageSize = ref(10);
        const total = ref(0);
        const articles = ref([]);
        const category_ids = ref([]);

        const getArticleList = (page, categories) => {
            getArticles(page - 1, pageSize.value, "", "", categories).then((res) => {
                total.value = res.data.total;
                articles.value = res.data.items;
            });
        }

        const turnPage = (pageNumber) => {
            page.value = pageNumber;
            getArticleList(page.value, category_ids.value);
        };

        const getCategoryList = () => {
            getCategories(props.type).then(res => {
                categories.value = res.data
                if (categories.value.length == 0) return
                let categoryArray = []
                for (let c of categories.value) {
                    categoryArray.push(c.id)
                }
                category_ids.value = categoryArray
                getArticleList(page.value, categoryArray)
            })
        }

        const getArticlesByCategory = (cid) => {
            console.log("category now is ", cid);
            page.value = 1;
            category_ids.value = [cid];
            getArticleList(page.value, [cid]);
        };

        const getAllCategoryArticles = () => {
            getArticleList(page.value, categories.value.map(c => { return c.id }));
        }

        function initData() {
            getCategoryList(categories, category_ids, page, pageSize, articles, total)
        }

        onMounted(
            initData
        );

        return {
            page,
            pageSize,
            total,
            categories,
            articles,
            getArticlesByCategory,
            getAllCategoryArticles,
            turnPage,
        };
    },
};
</script>
  
  <style>
.my-pagination {
    margin: 1em 0;
}
</style>